<!doctype html>
<html style='font-size:18px !important'>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>css入门</title><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
  #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
  .typora-export #write::after { height: 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
svg[id^="mermaidChart"] { line-height: 1em; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }


.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}


:root {
    --side-bar-bg-color: #fff;
    --control-text-color: #777;
}

/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
html {
    font-size: 14px;
}

body {
    font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif !important;
    color: #34495e;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 100px;
}

#write p {
    line-height: 1.6rem;
    word-spacing: .05rem;
}

#write ol li {
    text-indent: 0.5rem;
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

a {
    color: #42b983;
    font-weight: 600;
    padding: 0 2px;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 tt,
h1 code {
    font-size: inherit !important;
}

h2 tt,
h2 code {
    font-size: inherit !important;
}

h3 tt,
h3 code {
    font-size: inherit !important;
}

h4 tt,
h4 code {
    font-size: inherit !important;
}

h5 tt,
h5 code {
    font-size: inherit !important;
}

h6 tt,
h6 code {
    font-size: inherit !important;
}

h2 a,
h3 a {
    color: #34495e;
}

h1 {
    padding-bottom: .4rem;
    font-size: 2.2rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.225;
    margin: 35px 0 15px;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.43;
    margin: 20px 0 7px;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
    color: #777;
}

p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}

li > ol,
li > ul {
    margin: 0 0;
}

hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

li p.first {
    display: inline-block;
}

ul,
ol {
    padding-left: 30px;
}

ul:first-child,
ol:first-child {
    margin-top: 0;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

blockquote {
    border-left: 4px solid #42b983;
    padding: 10px 15px;
    color: #777;
    background-color: rgba(66, 185, 131, .1);
}

table {
    padding: 0;
    word-break: initial;
}

table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

table tr:nth-child(2n),
thead {
    background-color: #fafafa;
}

table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

#write strong {
    padding: 0 1px;
}

#write em {
    padding: 0 5px 0 2px;
}

#write table thead th {
    background-color: #f2f2f2;
}

#write .CodeMirror-gutters {
    border-right: none;
}

#write .md-fences {
    border: 1px solid #F4F4F4;
    -webkit-font-smoothing: initial;
    margin: 0.8rem 0 !important;
    padding: 0.3rem 0 !important;
    line-height: 1.43rem;
    background-color: #F8F8F8 !important;
    border-radius: 2px;
    font-family: Roboto Mono, Source Sans Pro, Monaco, courier, monospace !important;
    font-size: 0.85rem;
    word-wrap: normal;
}

#write .CodeMirror-wrap .CodeMirror-code pre {
    padding-left: 12px;
}

#write code, tt {
    margin: 0 2px;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: Roboto Mono, Source Sans Pro, Monaco, courier, monospace !important;
    font-size: 0.92rem;
    color: #e96900;
    background-color: #f8f8f8;
}

#write .md-footnote {
    background-color: #f8f8f8;
    color: #e96900;
}

/* heighlight. */
#write mark {
    background-color: #EBFFEB;
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
    color: #222;
    font-weight: 500;
}

#write del {
    padding: 1px 2px;
}

.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
    color: #22a2c9;
}

.cm-s-inner .cm-string {
    color: #22a2c9;
}

.md-task-list-item > input {
    margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }

    table,
    pre {
        page-break-inside: avoid;
    }

    pre {
        word-wrap: break-word;
    }
}

.md-fences {
    background-color: #f8f8f8;
}

#write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: .375rem;
}

#write > h3.md-focus:before {
    left: -1.5625rem;
    top: .375rem;
}

#write > h4.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h5.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h6.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

.md-image > .md-meta {
    border-radius: 3px;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: inherit;
}

.md-toc {
    margin-top: 20px;
    padding-bottom: 20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

/** focus mode */

.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: "Segoe UI", "Arial", sans-serif;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}



</style>
</head>
<body class='typora-export' >
<div  id='write'  class = 'is-node'><h1><a name="1-css基础" class="md-header-anchor"></a><span>1. CSS基础</span></h1><p><span>CSS是什么？</span></p><ul><li><span>Cascading Style Sheet（层叠样式表）</span></li></ul><p>&nbsp;</p><h2><a name="11-css的引入方式" class="md-header-anchor"></a><span>1.1 CSS的引入方式</span></h2><ol start='' ><li><p><strong><span>外部样式表（唯一推荐）</span></strong></p><ul><li><span>在</span><code>&lt;head&gt;&lt;/head&gt;</code><span>标签对中使用</span><code>link</code><span>标签来引用。</span></li><li><code>&lt;link href=&quot;index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; &gt;</code></li></ul></li><li><p><span>内部样式表（low）</span></p><ul><li><span>CSS代码和HTML代码放在同一个文件中</span></li><li><span>把CSS代码放在</span><code>&lt;style&gt;&lt;/style&gt;</code><span>标签对内</span></li></ul></li><li><p><span>内联样式表(更low)</span></p><ul><li><span>CSS代码和HTML代码放在同一个文件中</span></li><li><span>把CSS代码标签元素的style属性中</span></li></ul></li></ol><h2><a name="12-css注释" class="md-header-anchor"></a><span>1.2 CSS注释</span></h2><p><span>语法：</span><code>/*注释的内容*/</code></p><p><span>在style标签内使用注释时使用该语法</span></p><p>&nbsp;</p><h1><a name="2-css选择器基础" class="md-header-anchor"></a><span>2. CSS选择器基础</span></h1><h2><a name="21-id和class" class="md-header-anchor"></a><span>2.1 id和class</span></h2><ul><li><span>id和class是选择器使用的最常见的两个属性</span></li><li><span>id唯一</span></li><li><span>class不唯一</span></li></ul><p>&nbsp;</p><h2><a name="22-常用的css选择器" class="md-header-anchor"></a><span>2.2 常用的CSS选择器</span></h2><p><span>CSS选择器基本语法</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">选择器{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  样式属性<span class="cm-number">1</span>：值<span class="cm-number">1</span>，</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  央视属性<span class="cm-number">2</span>：值<span class="cm-number">2</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="display: none; height: 100px;"></div></div></div></pre><ul><li><p><span>元素选择器</span></p><ul><li><span>无前缀</span></li><li><span>示例：</span><code>div{color:red;}</code></li></ul></li><li><p><span>id选择器</span></p><ul><li><span>前缀为</span><code>#</code></li><li><span>示例：</span><code>#lvye{color:red;}</code></li></ul></li><li><p><span>类选择器</span></p><ul><li><span>前缀为</span><code>.</code></li><li><span>示例：</span><code>.lv{color:red;}</code></li></ul></li><li><p><span>子元素选择器</span></p><ul><li><span>选择某元素内的某元素</span></li><li><span>格式：用</span><code>空格</code><span>连接</span></li><li><span>示例：</span><code>#father2 #p1{color:red;}</code></li></ul></li><li><p><span>相邻选择器</span></p><ul><li><span>选择与某元素相邻的某元素，注意是同级元素</span></li><li><span>格式用</span><code>+</code><span>连接</span></li><li><span>示例：</span><code>#lv+div{color:red;}</code></li></ul></li><li><p><span>群组选择器</span></p><ul><li><span>同时选择多个元素</span></li><li><span>格式：用</span><code>,</code><span>连接</span></li><li><span>示例：</span><code>h3,div,p,span{color:red;}</code></li></ul></li></ul><p>&nbsp;</p><h1><a name="3-字体样式" class="md-header-anchor"></a><span>3. 字体样式</span></h1><p><span>CSS文字属性</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>属性</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>font-family</span></td><td style='text-align:left;' ><span>字体类型</span></td></tr><tr><td style='text-align:left;' ><span>font-size</span></td><td style='text-align:left;' ><span>字体大小</span></td></tr><tr><td style='text-align:left;' ><span>font-weight</span></td><td style='text-align:left;' ><span>字体粗细</span></td></tr><tr><td style='text-align:left;' ><span>font-style</span></td><td style='text-align:left;' ><span>字体斜体</span></td></tr><tr><td style='text-align:left;' ><span>color</span></td><td style='text-align:left;' ><span>颜色</span></td></tr></tbody></table></figure><p>&nbsp;</p><h2><a name="31-字体类型font-family" class="md-header-anchor"></a><span>3.1 字体类型font-family</span></h2><p><span>语法：</span><code>font-family：字体1,字体2,字体3;</code></p><ul><li><span>多个字体表示优先级，如果不能使用高优先级的字体，就往下延</span></li></ul><hr /><h2><a name="32-字体大小font-size" class="md-header-anchor"></a><span>3.2 字体大小font-size</span></h2><p><span>语法：</span><code>font-size：关键字/像素值;</code></p><p><span>说明：</span></p><ul><li><p><span>关键字不常使用，只需要了解即可</span></p><ul><li><figure><table><thead><tr><th style='text-align:left;' ><span>font-size属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>xx-small</span></td><td style='text-align:left;' ><span>最小</span></td></tr><tr><td style='text-align:left;' ><span>x-small</span></td><td style='text-align:left;' ><span>较小</span></td></tr><tr><td style='text-align:left;' ><span>small</span></td><td style='text-align:left;' ><span>小</span></td></tr><tr><td style='text-align:left;' ><span>medium</span></td><td style='text-align:left;' ><span>默认值，正常</span></td></tr><tr><td style='text-align:left;' ><span>large</span></td><td style='text-align:left;' ><span>大</span></td></tr><tr><td style='text-align:left;' ><span>x-large</span></td><td style='text-align:left;' ><span>较大</span></td></tr><tr><td style='text-align:left;' ><span>xx-large</span></td><td style='text-align:left;' ><span>最大</span></td></tr></tbody></table></figure></li></ul></li><li><p><span>常用的像素值，例如：</span><code>#p1{font-size:10px;}</code></p></li><li><p><span>其实还有别的单位，比如</span><code>em</code><span>，</span><code>百分比</code><span>等，</span><strong><span>这也同样适用于下面讲到的使用像素值的情况</span></strong></p></li></ul><hr /><h2><a name="33-字体颜色color" class="md-header-anchor"></a><span>3.3 字体颜色color</span></h2><p><span>语法：</span><code>color:颜色值;</code></p><ul><li><p><span>颜色值可以是：</span></p><ul><li><span>关键字，类似red，green，yellow</span></li><li><span>16进制的RGB值</span></li></ul></li></ul><hr /><h2><a name="34-字体粗细font-weight" class="md-header-anchor"></a><span>3.4 字体粗细font-weight</span></h2><p><span>语法：</span><code>font-weight:粗细值;</code></p><ul><li><p><span>粗细值可以是：</span></p><ul><li><strong><span>关键字（一般使用关键字）</span></strong></li><li><span>数值100~900</span></li></ul></li></ul><figure><table><thead><tr><th style='text-align:left;' ><span>font-weight属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>normal</span></td><td style='text-align:left;' ><span>默认值，正常体，对应400</span></td></tr><tr><td style='text-align:left;' ><span>lighter</span></td><td style='text-align:left;' ><span>较细</span></td></tr><tr><td style='text-align:left;' ><span>bold</span></td><td style='text-align:left;' ><span>较粗，对应700</span></td></tr><tr><td style='text-align:left;' ><span>bolder</span></td><td style='text-align:left;' ><span>很粗（其实效果跟bold差不多）</span></td></tr></tbody></table></figure><hr /><h2><a name="35-字体倾斜font-style" class="md-header-anchor"></a><span>3.5 字体倾斜font-style</span></h2><p><span>语法：</span><code>font-style:值;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>font-style属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>normal</span></td><td style='text-align:left;' ><span>默认值，正常体</span></td></tr><tr><td style='text-align:left;' ><span>italic</span></td><td style='text-align:left;' ><span>斜体，这是一个属性</span></td></tr><tr><td style='text-align:left;' ><span>oblique</span></td><td style='text-align:left;' ><span>将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique</span></td></tr></tbody></table></figure><blockquote><p><span>注意</span><code>italic</code><span>和</span><code>oblique</code><span>的区别，前者是字体的属性，对于没有该属性的字体，要使用后者</span></p></blockquote><p>&nbsp;</p><h1><a name="4-段落样式" class="md-header-anchor"></a><span>4. 段落样式</span></h1><figure><table><thead><tr><th style='text-align:left;' ><span>属性</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>text-decoration</span></td><td style='text-align:left;' ><span>下划线、删除线、顶划线</span></td></tr><tr><td style='text-align:left;' ><span>text-transform</span></td><td style='text-align:left;' ><span>文本大小写</span></td></tr><tr><td style='text-align:left;' ><span>font-varient</span></td><td style='text-align:left;' ><span>将英文文本转换为“小型”大写字母</span></td></tr><tr><td style='text-align:left;' ><span>text-indent</span></td><td style='text-align:left;' ><span>段落首行缩进</span></td></tr><tr><td style='text-align:left;' ><span>text-align</span></td><td style='text-align:left;' ><span>文本水平对齐方式</span></td></tr><tr><td style='text-align:left;' ><span>line-height</span></td><td style='text-align:left;' ><span>行高</span></td></tr><tr><td style='text-align:left;' ><span>letter-spacing</span></td><td style='text-align:left;' ><span>字距</span></td></tr><tr><td style='text-align:left;' ><span>word-spacing</span></td><td style='text-align:left;' ><span>词距</span></td></tr></tbody></table></figure><p>&nbsp;</p><h2><a name="41-下划线删除线和顶划线text-decoration" class="md-header-anchor"></a><span>4.1 下划线、删除线和顶划线text-decoration</span></h2><p><span>语法：</span><code>text-decoration:属性值;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>none</span></td><td style='text-align:left;' ><span>默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式</span></td></tr><tr><td style='text-align:left;' ><span>underline</span></td><td style='text-align:left;' ><span>下划线</span></td></tr><tr><td style='text-align:left;' ><span>line-through</span></td><td style='text-align:left;' ><span>删除线</span></td></tr><tr><td style='text-align:left;' ><span>overline</span></td><td style='text-align:left;' ><span>顶划线（几乎不用）</span></td></tr></tbody></table></figure><blockquote><ul><li><span>属性值</span><code>none</code><span>常用于去除</span><code>&lt;a&gt;</code><span>标签的下划线</span></li><li><span>学到这就可以弃用前面HTML部分中的（</span><code>&lt;s&gt;</code><span>标签、</span><code>&lt;u&gt;</code><span>标签）了</span></li></ul></blockquote><hr /><h2><a name="42-文本大小写text-transform" class="md-header-anchor"></a><span>4.2 文本大小写text-transform</span></h2><p><span>语法：</span><code>text-transform:属性值;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>none</span></td><td style='text-align:left;' ><span>默认值，无转换发生</span></td></tr><tr><td style='text-align:left;' ><span>uppercase</span></td><td style='text-align:left;' ><span>转换成大写</span></td></tr><tr><td style='text-align:left;' ><span>lowercase</span></td><td style='text-align:left;' ><span>转换成小写</span></td></tr><tr><td style='text-align:left;' ><span>capitalize</span></td><td style='text-align:left;' ><span>将每个英文单词的首字母转换成大写，其余无转换发生</span></td></tr></tbody></table></figure><hr /><h2><a name="43-小型大写字母font-variant极少用到）" class="md-header-anchor"></a><span>4.3 小型大写字母font-variant（极少用到）</span></h2><p><span>语法：</span><code>font-variant：normal/small-caps;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>font-variant属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>normal</span></td><td style='text-align:left;' ><span>默认值，正常效果</span></td></tr><tr><td style='text-align:left;' ><span>small-caps</span></td><td style='text-align:left;' ><span>小型大写字母的字体</span></td></tr></tbody></table></figure><p><span>效果：</span><img src="http://www.lvyestudy.com/App_images/lesson/cj/4-4-1.png" referrerpolicy="no-referrer" alt="font-variant属性"></p><ul><li><span>极少使用，可以略过</span></li></ul><hr /><h2><a name="44-首行缩进text-indent" class="md-header-anchor"></a><span>4.4 首行缩进text-indent</span></h2><p><span>语法：</span><code>text-indent:像素值;</code></p><ul><li><span>具体缩进多少一般根据字体大小来定，一般缩进两个字符</span></li></ul><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">p</span>{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">font-size</span>:<span class="cm-number">14px</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">text-indent</span>:<span class="cm-number">28px</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="display: none; height: 100px;"></div></div></div></pre><hr /><h2><a name="45-文本水平对齐text-align" class="md-header-anchor"></a><span>4.5 文本水平对齐text-align</span></h2><p><span>语法：</span><code>text-align:属性值;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>text-align属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>left</span></td><td style='text-align:left;' ><span>默认值，左对齐</span></td></tr><tr><td style='text-align:left;' ><span>center</span></td><td style='text-align:left;' ><span>居中对齐</span></td></tr><tr><td style='text-align:left;' ><span>right</span></td><td style='text-align:left;' ><span>右对齐</span></td></tr></tbody></table></figure><blockquote><p><span>需要注意，text-align属性不仅对文本文字有效，</span><strong><span>对</span><code>&lt;img&gt;</code><span>标签也有效</span></strong></p></blockquote><hr /><h2><a name="46-行高line-height" class="md-header-anchor"></a><span>4.6 行高line-height</span></h2><p><span>语法：</span><code>line-height:像素值;</code></p><ul><li><strong><span>注意：虽然目前来看，行高的表现形式类似行间距，但是要记住，两者不是一个东西</span></strong></li></ul><hr /><h2><a name="47-字母间距letter-spacing和词间距word-spacing" class="md-header-anchor"></a><span>4.7 字母间距letter-spacing和词间距word-spacing</span></h2><ul><li><p><span>字母间距letter-spacing属性</span></p><ul><li><span>语法：</span><code>letter-spacing:像素值;</code></li><li><span>一般用不到</span></li></ul></li><li><p><span>词间距word-spacing属性</span></p><ul><li><span>语法：</span><code>word-spacing:像素值;</code></li><li><span>比字母间距稍微能用到点</span></li></ul></li></ul><p>&nbsp;</p><h1><a name="5-边框样式" class="md-header-anchor"></a><span>5. 边框样式</span></h1><h2><a name="51-边框样式border" class="md-header-anchor"></a><span>5.1 边框样式border</span></h2><p><span>要设置一个元素的边框，必须</span><strong><span>同时</span></strong><span>设置它的</span><code>宽度border-width</code><span>、</span><code>外观border-style</code><span>和</span><code>颜色border-color</code><span>三个属性。</span></p><ul><li><p><span>宽度border-width</span></p></li><li><p><span>语法：</span><code>border-width:像素值;</code></p></li><li><p><span>外观border-style</span></p><ul><li><p><span>语法：</span><code>border-style:属性值;</code></p></li><li><figure><table><thead><tr><th style='text-align:left;' ><span>属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>none</span></td><td style='text-align:left;' ><span>无样式</span></td></tr><tr><td style='text-align:left;' ><span>hidden</span></td><td style='text-align:left;' ><span>与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突</span></td></tr><tr><td style='text-align:left;' ><span>solid</span></td><td style='text-align:left;' ><span>实线</span></td></tr><tr><td style='text-align:left;' ><span>dashed</span></td><td style='text-align:left;' ><span>虚线</span></td></tr><tr><td style='text-align:left;' ><span>dotted</span></td><td style='text-align:left;' ><span>点线</span></td></tr><tr><td style='text-align:left;' ><span>double</span></td><td style='text-align:left;' ><span>双线，双线的宽度等于border-width值</span></td></tr><tr><td style='text-align:left;' ><span>inset</span></td><td style='text-align:left;' ><span>内凹</span></td></tr><tr><td style='text-align:left;' ><span>outset</span></td><td style='text-align:left;' ><span>外凸</span></td></tr><tr><td style='text-align:left;' ><span>ridge</span></td><td style='text-align:left;' ><span>脊线</span></td></tr><tr><td style='text-align:left;' ><span>groove</span></td><td style='text-align:left;' ><span>槽线</span></td></tr></tbody></table></figure><blockquote><p><span>虽然属性很多，但其实只有</span><code>solid</code><span>和</span><code>dashed</code><span>实用</span></p></blockquote></li></ul></li><li><p><span>颜色border-color</span></p><ul><li><span>语法：</span><code>border-color:颜色值;</code></li></ul></li><li><p><span>简介写法：</span><strong><code>border:1px solid Red;</code><span>推荐使用</span></strong></p></li></ul><hr /><h2><a name="52-border局部边框样式" class="md-header-anchor"></a><span>5.2 border局部边框样式</span></h2><ul><li><p><span>上边框border-top</span></p></li><li><p><span>下边框border-bottom</span></p></li><li><p><span>左边框border-left</span></p></li><li><p><span>右边边框border-right</span></p></li><li><p><span>简介写法也都是支持的，并且推荐使用</span></p></li><li><p><span>去除边框的两种写法</span></p><ul><li><code>border-bottom:0px</code></li><li><strong><code>border-bottom:none</code><span>这种好理解些吧</span></strong></li></ul></li></ul><hr /><h1><a name="6-背景样式" class="md-header-anchor"></a><span>6. 背景样式</span></h1><h2><a name="61-背景颜色background-color" class="md-header-anchor"></a><span>6.1 背景颜色background-color</span></h2><p><span>语法：</span><code>background-color:颜色值;</code></p><hr /><h2><a name="62-背景图片样式" class="md-header-anchor"></a><span>6.2 背景图片样式</span></h2><figure><table><thead><tr><th style='text-align:left;' ><span>属性</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>background-image</span></td><td style='text-align:left;' ><span>定义背景图像的路径，这样图片才能显示嘛</span></td></tr><tr><td style='text-align:left;' ><span>background-repeat</span></td><td style='text-align:left;' ><span>定义背景图像显示方式，例如纵向平铺、横向平铺</span></td></tr><tr><td style='text-align:left;' ><span>background-position</span></td><td style='text-align:left;' ><span>定义背景图像在元素哪个位置</span></td></tr><tr><td style='text-align:left;' ><span>background-attachment</span></td><td style='text-align:left;' ><span>定义背景图像是否随内容而滚动</span></td></tr></tbody></table></figure><h3><a name="621-背景图像样式background-image" class="md-header-anchor"></a><span>6.2.1 背景图像样式background-image</span></h3><p><span>语法：</span><code>background-image:url(&quot;图像地址&quot;);</code></p><ul><li><span>被设置背景图片的元素要有一定的宽度和高度，不然图片显示不全，换言之图片大小是不变的，需要元素大小去适应它。</span></li></ul><hr /><h3><a name="622-背景重复样式background-repeat" class="md-header-anchor"></a><span>6.2.2 背景重复样式background-repeat</span></h3><p><span>语法：</span><code>background-repeat:取值;</code></p><figure><table><thead><tr><th style='text-align:left;' ><span>属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>no-repeat</span></td><td style='text-align:left;' ><span>表示不平铺</span></td></tr><tr><td style='text-align:left;' ><span>repeat</span></td><td style='text-align:left;' ><span>默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺</span></td></tr><tr><td style='text-align:left;' ><span>repeat-x</span></td><td style='text-align:left;' ><span>表示在水平方向（x轴）平铺</span></td></tr><tr><td style='text-align:left;' ><span>repeat-y</span></td><td style='text-align:left;' ><span>表示在垂直方向（y轴）平铺</span></td></tr></tbody></table></figure><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/6-5-2.png" referrerpolicy="no-referrer" alt="background-repeat属性实例"></p><hr /><h3><a name="623-背景图片位置background-position" class="md-header-anchor"></a><span>6.2.3 背景图片位置background-position</span></h3><p><span>语法：</span><code>background-positon:像素值/关键字;</code></p><ul><li><p><span>像素值：例</span><code>background-position:80px 40px;</code></p></li><li><p><span>关键字：</span></p><ul><li><figure><table><thead><tr><th style='text-align:left;' ><span>属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>top left</span></td><td style='text-align:left;' ><span>左上</span></td></tr><tr><td style='text-align:left;' ><span>top center</span></td><td style='text-align:left;' ><span>靠上居中</span></td></tr><tr><td style='text-align:left;' ><span>top right</span></td><td style='text-align:left;' ><span>右上</span></td></tr><tr><td style='text-align:left;' ><span>left center</span></td><td style='text-align:left;' ><span>靠左居中</span></td></tr><tr><td style='text-align:left;' ><span>center center</span></td><td style='text-align:left;' ><span>正中</span></td></tr><tr><td style='text-align:left;' ><span>right center</span></td><td style='text-align:left;' ><span>靠右居中</span></td></tr><tr><td style='text-align:left;' ><span>bottom left</span></td><td style='text-align:left;' ><span>左下</span></td></tr><tr><td style='text-align:left;' ><span>bottom center</span></td><td style='text-align:left;' ><span>靠下居中</span></td></tr><tr><td style='text-align:left;' ><span>bottom right</span></td><td style='text-align:left;' ><span>右下</span></td></tr></tbody></table></figure></li></ul></li></ul><blockquote><p><span>这个属性只能应用于块级元素和替换元素(img、input、textarea、select和object)。</span></p></blockquote><hr /><h3><a name="624-背景固定样式background-attachment" class="md-header-anchor"></a><span>6.2.4 背景固定样式background-attachment</span></h3><p><span>用来设置图像是随对象滚动还是固定不动。</span></p><p><span>语法：</span><code>background-attachment:scroll/fixed;</code></p><ul><li><span>scroll表示背景图像随对象滚动而滚动（默认）</span></li><li><span>fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。</span></li></ul><hr /><h1><a name="7-超链接样式" class="md-header-anchor"></a><span>7. 超链接样式</span></h1><h2><a name="71-超链接伪类" class="md-header-anchor"></a><span>7.1 超链接伪类</span></h2><p><span>指为同一个a标签定义不同时期的不同样式</span></p><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">a</span>:<span class="cm-variable-3">link</span>{<span class="cm-property cm-error">CSS</span>样式}</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">a</span>:<span class="cm-variable-3">visited</span>{<span class="cm-property cm-error">CSS</span>样式}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">a</span>:<span class="cm-variable-3">hover</span>{<span class="cm-property cm-error">CSS</span>样式}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">a</span>:<span class="cm-variable-3">actived</span>{<span class="cm-property cm-error">CSS</span>样式}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="display: none; height: 100px;"></div></div></div></pre><figure><table><thead><tr><th style='text-align:left;' ><span>属性</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>a:link</span></td><td style='text-align:left;' ><span>定义a元素未访问时的样式</span></td></tr><tr><td style='text-align:left;' ><span>a:visited</span></td><td style='text-align:left;' ><span>定义a元素访问后的样式</span></td></tr><tr><td style='text-align:left;' ><span>a:hover</span></td><td style='text-align:left;' ><span>定义鼠标经过显示的样式</span></td></tr><tr><td style='text-align:left;' ><span>a:active</span></td><td style='text-align:left;' ><span>定义鼠标单击激活时的样式</span></td></tr></tbody></table></figure><blockquote><ul><li><span>必须按照顺序依次定义</span></li><li><span>并不一定都要定义，需要哪个定义哪个，但是要按顺序</span></li><li><span>简单记忆LoVe HAte</span></li></ul></blockquote><hr /><h2><a name="72-关于hover伪类" class="md-header-anchor"></a><span>7.2 关于hover伪类</span></h2><p><span>上面提到的hover伪类，控制了鼠标经过时的样式，不只是a标签能用，</span><strong><span>任何一个元素都能使用</span></strong><span>，称得上使用比较广泛。</span></p><h2><a name="73-css鼠标样式" class="md-header-anchor"></a><span>7.3 CSS鼠标样式</span></h2><p><span>语法：</span><code>cursor:属性值;</code></p><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/7-4-1.png" referrerpolicy="no-referrer" alt="cursor属性值列表"></p><blockquote><p><span>不要记这些属性，除了</span><code>默认值</code><span>和</span><code>pointer</code><span>较为常用，</span><strong><span>其他基本都用不到。</span></strong></p></blockquote><hr /><h1><a name="8-图片样式" class="md-header-anchor"></a><span>8. 图片样式</span></h1><h2><a name="81-css图片大小" class="md-header-anchor"></a><span>8.1 CSS图片大小</span></h2><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">width</span>:像素值;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">height</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 50px;"></div><div class="CodeMirror-gutters" style="display: none; height: 50px;"></div></div></div></pre><h2><a name="82-图片边框border" class="md-header-anchor"></a><span>8.2 图片边框border</span></h2><p><span>用法参考</span><code>第5部分</code></p><hr /><h2><a name="83-图片水平对齐" class="md-header-anchor"></a><span>8.3 图片水平对齐</span></h2><p><span>用法参考</span><code>4.5</code></p><p><span>补充说明：text-align只对</span><code>文本</code><span>和</span><code>img标签</code><span>有效。</span></p><p><strong><span>注意点：一般来讲，text-align样式不直接设置在</span><code>img标签</code><span>上，而是设置在它的父标签上。</span></strong></p><hr /><h2><a name="84-图片垂直对齐" class="md-header-anchor"></a><span>8.4 图片垂直对齐</span></h2><p><span>语法：</span><code>vertical-align:属性值;</code></p><p><span>属性值：</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>vertical-align属性取值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>top</span></td><td style='text-align:left;' ><span>顶部对齐</span></td></tr><tr><td style='text-align:left;' ><span>middle</span></td><td style='text-align:left;' ><span>中部对齐</span></td></tr><tr><td style='text-align:left;' ><span>baseline</span></td><td style='text-align:left;' ><span>基线对齐</span></td></tr><tr><td style='text-align:left;' ><span>bottom</span></td><td style='text-align:left;' ><span>底部对齐</span></td></tr></tbody></table></figure><p><span>效果：</span></p><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/8-4-2.png" referrerpolicy="no-referrer" alt="CSS图片垂直对齐"></p><blockquote><p><span>注意理解什么是垂直对齐，</span><strong><span>vertical-align属性定义行内元素相对于该元素的垂直对齐方式</span></strong><span>。</span></p><ul><li><span>复习行内元素和块元素</span></li></ul></blockquote><h2><a name="85-文字环绕效果float" class="md-header-anchor"></a><span>8.5 文字环绕效果float</span></h2><p><span>语法：</span><code>float:取值;</code></p><p><span>属性值：</span></p><ul><li><span>left——元素向左浮动</span></li><li><span>right——元素向右浮动</span></li></ul><p><span>设置图片与文字的间距</span></p><ul><li><p><span>方法：给</span><code>&lt;img&gt;</code><span>标签添加</span><code>margin</code><span>属性</span></p></li><li><p><span>例子：</span></p><ul><li><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">margin-top</span>:像素值;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">margin-bottom</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">margin-left</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">margin-right</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="display: none; height: 100px;"></div></div></div></pre></li></ul></li><li><p><span>这部分在CSS盒子模型这部分时会详细讲</span></p></li></ul><hr /><h1><a name="9-列表样式" class="md-header-anchor"></a><span>9. 列表样式</span></h1><h2><a name="91-列表项符号list-style-type" class="md-header-anchor"></a><span>9.1 列表项符号list-style-type</span></h2><p><span>在html中，我们用</span><code>列表标签</code><span>的</span><code>type属性</code><span>来控制列表项符号，现在我们使用CSS中的</span><code>list-style-type</code><span>属性来统一控制。</span></p><p><span>语法：</span><code>list-style-type:属性值;</code></p><p><span>属性值：</span></p><ul><li><span>有序列表</span></li></ul><figure><table><thead><tr><th style='text-align:left;' ><span>list-style-type属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>decimal</span></td><td style='text-align:left;' ><span>默认值，数字1、2、3……</span></td></tr><tr><td style='text-align:left;' ><span>lower-roman</span></td><td style='text-align:left;' ><span>小写罗马数字i、ii、iii……</span></td></tr><tr><td style='text-align:left;' ><span>upper-roman</span></td><td style='text-align:left;' ><span>大写罗马数字I、II、III……</span></td></tr><tr><td style='text-align:left;' ><span>lower-alpha</span></td><td style='text-align:left;' ><span>小写英文字母a、b、c……</span></td></tr><tr><td style='text-align:left;' ><span>upper-alpha</span></td><td style='text-align:left;' ><span>大写英文字母A、B、C……</span></td></tr></tbody></table></figure><ul><li><span>无序列表</span></li></ul><figure><table><thead><tr><th style='text-align:left;' ><span>list-style-type属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>disc</span></td><td style='text-align:left;' ><span>默认值，实心圆“●”</span></td></tr><tr><td style='text-align:left;' ><span>circle</span></td><td style='text-align:left;' ><span>空心圆“○”</span></td></tr><tr><td style='text-align:left;' ><span>square</span></td><td style='text-align:left;' ><span>实心正方形“■”</span></td></tr></tbody></table></figure><ul><li><span>通用</span></li></ul><figure><table><thead><tr><th style='text-align:left;' ><span>list-style-type取值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>none</span></td><td style='text-align:left;' ><span>去除列表项符号</span></td></tr></tbody></table></figure><blockquote><p><span>none属性值还是常常会用到的。</span></p></blockquote><hr /><h2><a name="92-自定义列表项符号list-style-image" class="md-header-anchor"></a><span>9.2 自定义列表项符号list-style-image</span></h2><p><span>语法：</span><code>list-style-image:url(图像地址);</code></p><hr /><h1><a name="10-表格样式" class="md-header-anchor"></a><span>10. 表格样式</span></h1><h2><a name="101-表格边框合并border-collapse" class="md-header-anchor"></a><span>10.1 表格边框合并border-collapse</span></h2><p><span>用来控制单元格与单元格之间的间隙</span></p><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/10-1-1.png" referrerpolicy="no-referrer" alt="border-collapse属性"></p><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/10-1-2.png" referrerpolicy="no-referrer" alt="border-collapse属性举例"></p><p><span>语法：</span><code>border-collapse:属性值;</code></p><p><span>属性取值：</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>border-collapse属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>separate</span></td><td style='text-align:left;' ><span>默认值，边框分开，不合并</span></td></tr><tr><td style='text-align:left;' ><span>collapse</span></td><td style='text-align:left;' ><span>边框合并，如果相邻，则共用一个边框</span></td></tr></tbody></table></figure><hr /><h2><a name="102-表格边框间距border-spacing" class="md-header-anchor"></a><span>10.2 表格边框间距border-spacing</span></h2><p><span>用来控制在上一小节中的间隙。</span></p><p><span>语法：</span><code>border-spacing:像素值;</code></p><ul><li><span>当指定一个像素值，这个值将同时控制横向和纵向；</span></li><li><span>当指定两个像素值，第一个作用于横向间距，第二个作用于纵向间距。</span></li></ul><hr /><h2><a name="103-表格标题位置caption-side" class="md-header-anchor"></a><span>10.3 表格标题位置caption-side</span></h2><p><span>语法：</span><code>caption-side:属性值;</code></p><p><span>属性值：</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>caption-side属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>top</span></td><td style='text-align:left;' ><span>默认值，标题在顶部</span></td></tr><tr><td style='text-align:left;' ><span>bottom</span></td><td style='text-align:left;' ><span>标题在底部</span></td></tr></tbody></table></figure><blockquote><p><span>虽然这个样式设置给</span><code>table标签</code><span>或是</span><code>caption标签</code><span>都行，但一般情况下设置给</span><code>caption标签</code></p></blockquote><hr /><h1><a name="11-css盒子模型" class="md-header-anchor"></a><span>11. CSS盒子模型</span></h1><p><strong><span>记住，是所有的元素都可以看出一个盒子！</span></strong></p><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/11-1-1.png" referrerpolicy="no-referrer" alt="CSS盒子模型"></p><p><span>盒子模型的四个属性</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>属性</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>border</span></td><td style='text-align:left;' ><span>（边框）元素边框</span></td></tr><tr><td style='text-align:left;' ><span>margin</span></td><td style='text-align:left;' ><span>（外边距）用于定义页面中元素与元素之间的距离</span></td></tr><tr><td style='text-align:left;' ><span>padding</span></td><td style='text-align:left;' ><span>（内边距）用于定义内容与边框之间的距离</span></td></tr><tr><td style='text-align:left;' ><span>content</span></td><td style='text-align:left;' ><span>（内容）可以是文字或图片</span></td></tr></tbody></table></figure><hr /><h2><a name="111-宽度width和高度height" class="md-header-anchor"></a><span>11.1 宽度width和高度height</span></h2><ul><li><p><span>作用：用来设置content的大小</span></p></li><li><p><span>语法：</span></p><ul><li><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">width</span>：像素值;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">height</span>：像素值</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 50px;"></div><div class="CodeMirror-gutters" style="display: none; height: 50px;"></div></div></div></pre></li></ul></li><li><p><span>只有块元素能设置width和height，行内元素无法设置width和height（设置了也无效）。</span></p></li></ul><blockquote><ul><li><p><span>想给行内元素也设置高度和宽度，可以使用</span><code>display属性</code><span>将行内元素转成块元素。</span></p><ul><li><code>display属性</code><span>同样可以将块元素转成行内元素。</span></li></ul></li></ul></blockquote><hr /><h2><a name="112-边框border" class="md-header-anchor"></a><span>11.2 边框border</span></h2><p><span>盒子模型的border和前面介绍的border属性一致。</span></p><p><span>注意：border的样式，常常使用简介写法：</span><code>border:像素值 边框类型 颜色值</code></p><hr /><h2><a name="113-内边距padding" class="md-header-anchor"></a><span>11.3 内边距padding</span></h2><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding-top</span>:像素值;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding-right</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding-bottom</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding-left</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="display: none; height: 100px;"></div></div></div></pre><p><span>这么写有些麻烦，我们通常使用</span><strong><span>简洁语法</span></strong><span>（三种）：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding</span>:像素值;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding</span>:像素值<span class="cm-number">1</span> 像素值<span class="cm-number">2</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">padding</span>:像素值<span class="cm-number">1</span> 像素值<span class="cm-number">2</span> 像素值<span class="cm-number">3</span> 像素值<span class="cm-number">4</span>;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 75px;"></div><div class="CodeMirror-gutters" style="display: none; height: 75px;"></div></div></div></pre><blockquote><ul><li><span>第一种写法代表四个方向同时设置</span></li><li><span>第二种写法代表上下为像素值1，左右为像素值2</span></li><li><span>第三种写法按照顺时针顺序设置</span></li></ul></blockquote><hr /><h2><a name="114-外边距margin" class="md-header-anchor"></a><span>11.4 外边距margin</span></h2><p><span>类比上一节内边距的写法，在此不多赘述；</span></p><hr /><h1><a name="12-文档流难点）" class="md-header-anchor"></a><span>12. 文档流（难点）</span></h1><h2><a name="121-正常文档流与脱离正常文档流" class="md-header-anchor"></a><span>12.1 正常文档流与脱离正常文档流</span></h2><p><img src="http://www.lvyestudy.com/App_images/lesson/cj/12-1-1.png" referrerpolicy="no-referrer" alt="CSS文档流"></p><p><span>如图所示就是正常文档流，脱离正常文档流就是在不改动HTML结构的情况下将某元素抽出来，用CSS控制将它放在我们想要的位置上。两种技术来实现：</span></p><ul><li><span>浮动</span></li><li><span>定位</span></li></ul><h2><a name="122-浮动float" class="md-header-anchor"></a><span>12.2 浮动float</span></h2><p><span>之前学习过图片的浮动，但其实在CSS中，任何元素都是可以浮动的</span></p><p><span>语法：</span><code>float:取值;</code></p><p><span>属性值：</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>float属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>left</span></td><td style='text-align:left;' ><span>元素向左浮动</span></td></tr><tr><td style='text-align:left;' ><span>right</span></td><td style='text-align:left;' ><span>元素向右浮动</span></td></tr></tbody></table></figure><p><span>例子：</span><img src="http://www.lvyestudy.com/App_images/lesson/cj/12-2-5.png" referrerpolicy="no-referrer" alt="float:right"></p><blockquote><p><span>当给一个元素设置浮动后，他就不再属于块元素或是行内元素，而是浮动元素，他的盒子属性只会和同级的浮动元素之间生效。</span></p></blockquote><hr /><h2><a name="123-清除浮动clear" class="md-header-anchor"></a><span>12.3 清除浮动clear</span></h2><p><span>语法：</span><code>clear:取值;</code></p><p><span>属性值：</span></p><figure><table><thead><tr><th style='text-align:left;' ><span>clear属性值</span></th><th style='text-align:left;' ><span>说明</span></th></tr></thead><tbody><tr><td style='text-align:left;' ><span>left</span></td><td style='text-align:left;' ><span>清除左浮动</span></td></tr><tr><td style='text-align:left;' ><span>right</span></td><td style='text-align:left;' ><span>清除右浮动</span></td></tr><tr><td style='text-align:left;' ><span>both</span></td><td style='text-align:left;' ><span>左右浮动一起清除</span></td></tr></tbody></table></figure><blockquote><ul><li><span>在已经设置了浮动的情况下清除才有意义</span></li><li><span>很少使用left、right属性值，一般要清除都是一起清除</span></li><li><span>除了使用clear属性来清除浮动，还可以采用“overflow:hidden;”来清除浮动（了解就行）</span></li></ul></blockquote><hr /><h1><a name="13-定位布局" class="md-header-anchor"></a><span>13. 定位布局</span></h1><h2><a name="131-css固定定位fixed" class="md-header-anchor"></a><span>13.1 CSS固定定位fixed</span></h2><p><span>固定定位就是一般网页上的“回顶部”效果。</span></p><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">position</span>:<span class="cm-variable-3">fixed</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">top</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">bottom</span>;像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">left</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">right</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 125px;"></div><div class="CodeMirror-gutters" style="display: none; height: 125px;"></div></div></div></pre><blockquote><ul><li><span>上下左右四个属性是相对浏览器的四个边来说的，一般设置两个就可以确定位置了</span></li><li><span>最常见的应用就是上面提到的回顶部了</span></li></ul></blockquote><hr /><h2><a name="132-css相对定位relative" class="md-header-anchor"></a><span>13.2 CSS相对定位relative</span></h2><p><span>采用相对定位的元素，其位置是相对于它的原始位置计算而来的。</span></p><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">position</span>:<span class="cm-variable-3">relative</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">top</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">bottom</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">left</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">right</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 125px;"></div><div class="CodeMirror-gutters" style="display: none; height: 125px;"></div></div></div></pre><hr /><h2><a name="133-css绝对定位简介" class="md-header-anchor"></a><span>13.3 CSS绝对定位简介</span></h2><p><span>当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。</span></p><p><span>语法：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">position</span>:<span class="cm-variable-3">absolute</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">top</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">bottom</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">left</span>:像素值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">right</span>:像素值;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 125px;"></div><div class="CodeMirror-gutters" style="display: none; height: 125px;"></div></div></div></pre><blockquote><ul><li><span>绝对定位是相对于浏览器来说的；</span></li><li><span>一旦一个元素变成了绝对定位元素，它就</span><strong><span>完全脱离正常文档流</span></strong><span>了；</span></li></ul></blockquote><hr /><h2><a name="134-css静态定位static" class="md-header-anchor"></a><span>13.4 CSS静态定位static</span></h2><ul><li><span>static是position属性的默认值；</span></li><li><span>一般我们不会用到</span><code>position:static</code><span>,但是使用JavaScript进行控制时，有时需要把其他定位方式的元素变成静态定位，这个时候就会用到；</span></li></ul></div>
</body>
</html>